ComponentOne CandlestickChart for ASP.NET Web Forms
Candlestick Chart Types / Creating a High-Low Chart
In This Topic
    Creating a High-Low Chart
    In This Topic

    There are two ways to create a High-Low chart: at design time or in Source View. This topic assumes that you have added the appropriate references and a C1CandlestickChart control to your new application.

    At Design Time

    1. Select the C1CandlestickChart control to open the control's Properties window.
    2. Locate the Type property in the Appearance properties.
    3. Use the drop-down arrow to select "Hl" from the list. 
    4. Add SeriesList data as in Step 2 of the Quick Start. For a High-Low chart, you only need High, Low, and X values.
    5. Customize your chart using the ChartStyle options.
    6. Run your application.

    In Source View

    The following markup can be used to create and customize a High-Low chart in Source View. Note that the color and width of the chart elements has been set:

    Markup
    Copy Code 
    <cc1:C1CandlestickChart ID="C1CandlestickChart1" runat="server" Type="Hl">
    <CandlestickChartSeriesStyles>
        <cc1:CandlestickChartStyle>
            <HighLow Width="3">
                <Fill Color="#0033CC">
                </Fill>
            </HighLow>                   
        </cc1CandlestickChartStyle>
    </CandlestickChartSeriesStyles>
    <SeriesList>
        <cc1:CandlestickChartSeries LegendEntry="True" Label="High-Low Values">
            <Data>
                <High DoubleValues="10, 12, 11, 14, 16, 20, 18, 17" />
                <Low DoubleValues="7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10" />
                <X>
                    <Values>
                        <cc1:ChartXData DateTimeValue="2014-03-07" />
                        <cc1:ChartXData DateTimeValue="2014-03-08" />
                        <cc1:ChartXData DateTimeValue="2014-03-09" />
                        <cc1:ChartXData DateTimeValue="2014-03-10" />
                        <cc1:ChartXData DateTimeValue="2014-03-11" />
                        <cc1:ChartXData DateTimeValue="2014-03-12" />
                        <cc1:ChartXData DateTimeValue="2014-03-13" />
                        <cc1:ChartXData DateTimeValue="2014-03-14" />
                    </Values>
                </X>
            </Data>
        </cc1CandlestickChartSeries>
    </SeriesList>           
</cc1C1CandlestickChart>

     

     

    See Also
    Creating a High-Low-Open-Close Chart